<template>
	<div id="ProjectCase">
		<el-main>
			<el-row :gutter="10" class="ActionBar">
				<el-col :span="4.5">
					工程_id:
					<el-select v-model="value" placeholder="请选择">
						<el-option
							v-for="item in options"
							:key="item.value"
							:label="item.label"
							:value="item.value"
						></el-option>
					</el-select>
				</el-col>
				<el-col :span="4.5">
					工程名字:
					<el-select v-model="value" placeholder="请选择">
						<el-option
							v-for="item in options"
							:key="item.value"
							:label="item.label"
							:value="item.value"
						></el-option>
					</el-select>
				</el-col>
				<el-col :span="4.5">
					案例类别:
					<el-select v-model="value" placeholder="请选择">
						<el-option
							v-for="item in options"
							:key="item.value"
							:label="item.label"
							:value="item.value"
						></el-option>
					</el-select>
				</el-col>
				<el-col :span="4.5">
					<el-button type="primary" icon="el-icon-search">查询</el-button>
					<el-button type="primary" icon="el-icon-circle-plus-outline">新增</el-button>
					<el-button type="primary" @click="handleAdd">
						新增
						<i class="el-icon-circle-plus-outline"></i>
					</el-button>
					<el-dialog title="文章信息" :visible.sync="dialogFormVisible" width="60%">
						<el-form label-width="80px" size="small">
							<el-form-item label="文章标题">
								<el-input v-model="form.name" autocomplete="off"></el-input>
							</el-form-item>
							<el-form-item label="文章内容">
								<mavon-editor ref="md" v-model="form.content" :ishljs="true" @imgAdd="imgAdd" />
							</el-form-item>
						</el-form>
						<div slot="footer" class="dialog-footer">
							<el-button @click="dialogFormVisible = false">取 消</el-button>
							<el-button type="primary" @click="save">确 定</el-button>
						</div>
					</el-dialog>
				</el-col>
			</el-row>
			<el-card>
				<el-table :data="ProjectCaseList" border style="width: 100%">
					<el-table-column align="center" prop="id" label="工程_id" width="100"></el-table-column>
					<el-table-column
						align="center"
						prop="CaseCategoryc"
						label="案例类别"
						width="100"
					></el-table-column>
					<el-table-column align="center" label="工程图例" width="100">
						<template scope="scope">
							<el-image
								style="width: 30px; height: 30px"
								:src="scope.row.img"
								:preview-src-list="[scope.row.img]"
							></el-image>
						</template>
					</el-table-column>
					<el-table-column align="center" prop="title" label="工程名字"></el-table-column>
					<el-table-column align="center" prop="MarkdownRightUrl" label="工程简介">
						<template slot-scope="scope">
							<span @click="dj(scope.row.MarkdownRightUrl, '工程简介')">
								<!-- {{ scope.row.MarkdownRightUrl }} -->
								详情
							</span>
						</template>
					</el-table-column>
					<el-table-column align="center" prop="MarkdowntUrl" label="工程详情">
						<template slot-scope="scope">
							<span @click="dj(scope.row.MarkdowntUrl, '工程详情')">
								<!-- {{ scope.row.MarkdowntUrl }} -->
								详情
							</span>
						</template>
					</el-table-column>
					<el-table-column align="center" fixed="right" label="操作" width="100">
						<template slot-scope="scope">
							<el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
							<el-button type="text" size="small">编辑</el-button>
						</template>
					</el-table-column>
				</el-table>
			</el-card>
		</el-main>
		<el-dialog :title="dialog_title" :visible.sync="dialogTableVisible">
			<div v-html="MarkdownData" class="markdown-body"></div>
		</el-dialog>
	</div>
</template>
<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
const {marked} = require('marked')
// 例如：import 《组件名称》 from '《组件路径》';
import axios from 'axios'
export default {
	// import引入的组件需要注入到对象中才能使用
	components: {},
	props: {},
	data() {
		// 这里存放数据
		return {
			dialogTableVisible: false,
			MarkdownData: '',
			dialog_title: '',
			ProjectCaseList: [
				{
					id: 10001,
					CaseCategory: 'PowerEngineering',
					CaseCategoryc: '电力工程',
					img: 'http://public.znrdtech.cn/picture/Qualifications/17.honoraryCertificateOfRescueAndDisasterRelief.jpg',
					title: '17.抢险救灾荣誉证书',
					MarkdownRightUrl: 'http://md.znrdtech.cn/RecruitmentPosition.md',
					MarkdowntUrl: 'http://md.znrdtech.cn/Aftermarket.md'
				}
			],
			options: [
				{
					value: '选项1',
					label: '黄金糕'
				},
				{
					value: '选项2',
					label: '双皮奶'
				},
				{
					value: '选项3',
					label: '蚵仔煎'
				},
				{
					value: '选项4',
					label: '龙须面'
				},
				{
					value: '选项5',
					label: '北京烤鸭'
				}
			],
			value: '',
			tableData: [],
			form: {},
			dialogFormVisible: false,

			viewDialogVis: false
		}
	},
	computed: {}, // 计算属性 类似于data概念
	watch: {}, // 监控data中的数据变化
	methods: {
		dj(MarkdownDataUrl, dialog_title) {
			this.dialogTableVisible = true
			this.dialog_title = dialog_title
			axios.get(MarkdownDataUrl).then(res => {
				this.MarkdownData = marked(res.data)
			})
		},
		handleAdd() {
			this.dialogFormVisible = true
			this.form = {}
		},
		handleEdit(row) {
			this.form = JSON.parse(JSON.stringify(row))
			this.dialogFormVisible = true
		},
		save() {
			console.log(this.form.content)
			console.log('html格式', this.$refs.md.d_render)
			console.log('md格式', this.$refs.md.d_value)
		},
		// 绑定@imgAdd event
		imgAdd(pos, $file) {
			let $vm = this.$refs.md
			// 第一步.将图片上传到服务器.
			const formData = new FormData()
			formData.append('file', $file)
			axios({
				url: `http://${serverHost}/file/upload`,
				method: 'post',
				data: formData,
				headers: {'Content-Type': 'multipart/form-data'}
			}).then(res => {
				// 第二步.将返回的url替换到文本原位置![...](./0) -> ![...](url)
				/**
				 * $vm 指为mavonEditor实例，可以通过如下两种方式获取
				 * 1. 通过引入对象获取: `import {mavonEditor} from ...` 等方式引入后，
				 * `$vm`为`mavonEditor`
				 * 2. 通过$refs获取: html声明ref : `<mavon-editor ref=md ></mavon-editor>，
				 * `$vm`为 `this.$refs.md`
				 */
				$vm.$img2Url(pos, res.data)
			})
		}
	}, // 方法集合
	created() {}, // 生命周期 - 创建完成（可以访问当前this实例）
	mounted() {}, // 生命周期 - 挂载完成（可以访问DOM元素）
	beforeCreate() {}, // 生命周期 - 创建之前
	beforeMount() {}, // 生命周期 - 挂载之前
	beforeUpdate() {}, // 生命周期 - 更新之前
	updated() {}, // 生命周期 - 更新之后
	beforeDestroy() {}, // 生命周期 - 销毁之前
	destroyed() {}, // 生命周期 - 销毁完成
	activated() {} // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style scoped>
.el-main {
	color: #333;
	min-height: calc(100vh - 120px);
}
body > .el-container {
	margin-bottom: 40px;
}
.el-select {
	padding: 0 0 20px;
}
</style>
